<template>
	<div class="home" ref="wrapper">
		<header>
			<span></span>
			<span class="title">首页</span>
			<span></span>
		</header>
		<div class="music" :class="{animation:music}">
			<router-link :to="{path:'/header/Music',query:{text:'Music'}}">
				<img src="../assets/img/timg.png" />
			</router-link>
		</div>
		<div class="swiper-container swiper">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img src="../assets/img/banner1.png" /></div>
				<div class="swiper-slide"><img src="../assets/img/banner2.png" /></div>
			</div>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination"></div>
		</div>
		<div class="main">
			<div v-for="item in arrMain">
				<router-link :to="{path:'/header/main/'+item.id,query:{text:item.text}}">
					<img :src="item.img" />
					<p>{{item.text}}</p>
				</router-link>
			</div>
		</div>
		<div class="main_swi">
			<img src="../assets/img/title.png" />
			<div class="swiper-container swiper1">
				<div class="swiper-wrapper">
					<div class="swiper-slide"><span>热门</span>我爱你老婆大人！！！</div>
					<div class="swiper-slide"><span>新闻</span>彤，想你了！！！</div>
					<div class="swiper-slide"><span>热门</span>我的反馈去，欧尼酱来了！！</div>
					<div class="swiper-slide"><span>新闻</span>星星星星那个大猩猩！！！</div>
					<div class="swiper-slide"><span>热门</span>潘彦彤此生不离不弃！！</div>
				</div>
			</div>
		</div>
		<div>
			<button class="But" @click="But">活体检测</button>
		</div>
	   <input type="text" name="" id="" value="" />
	</div>
</template>
<script>
	import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
	export default {
		name: "home",
		data() {
			return {
				arrMain: [{
						"img": require("../assets/img/ic_wallet.png"),
						"id": "1",
						"text": "美妆护肤",
					},
					{
						"img": require("../assets/img/ic_cell phone.png"),
						"id": "2",
						"text": "手机通讯",
					},
					{
						"img": require("../assets/img/ic_computer.png"),
						"id": "3",
						"text": "电脑数码",
					},
					{
						"img": require("../assets/img/ic_appliance.png"),
						"id": "4",
						"text": "家电家居",
					},
					{
						"img": require("../assets/img/ic_makeups.png"),
						"id": "5",
						"text": "美妆洗护",
					},
					{
						"img": require("../assets/img/ic_timelimit.png"),
						"id": "6",
						"text": "限时抢购",
					},
					{
						"img": require("../assets/img/ic_newuser.png"),
						"id": "7",
						"text": "新人专享",
					},
					{
						"img": require("../assets/img/ic_excellent product.png"),
						"id": "8",
						"text": "严选好物",
					},
					{
						"img": require("../assets/img/ic_invita.png"),
						"id": "9",
						"text": "邀请好友",
					},
					{
						"img": require("../assets/img/ic_more.png"),
						"id": "10",
						"text": "更多",
					},
				]

			}
		},
		computed: {
			...mapState(["music"])
		},
		created() {
			this.ajaxMusic(this);
		},
		mounted() {
			this.swiper();
		},
		methods: {
			...mapMutations(["Listmusic"]),
			ajaxMusic(that) {
				$.ajax({
					method: "post",
					url: "https://api.hibai.cn/api/index/index",
					dataType: 'json',
					async: true,
					data: {
						"TransCode": "020112",
						"OpenId": "123456789",
						"Body": {
							"SongListId": "141998290"
						}
					},
					success: function(res) {
						if(res.ErrCode == "OK") {
							that.Listmusic(res.Body);
						}
					}
				});
			},
			But() {
				mui.alert('1');
			},
			swiper() {
				var mySwiper = new Swiper('.swiper', {
					autoplay: "1500",
					loop: true,
					pagination: '.swiper-pagination',
				}, 200)
				var mySwiper = new Swiper('.swiper1', {
					autoplay: "2500",
					direction: 'vertical',
					slidesPerView: 2,
					loop: true,
				}, 200)
			}
		}
	}
</script>
<style scoped lang="scss">
	.home {
		width: 100%;
		font-size: 16px;
		header {
			width: 100%;
			height: 45px;
			padding: 0 16px;
			box-sizing: border-box;
			display: flex;
			border-bottom: 1px solid #EDEDED;
			justify-content: space-between;
			align-items: center;
			font-size: 16px;
		}
		.music {
			width: 40px;
			height: 40px;
			position: fixed;
			top: 2px;
			right: 15px;
			img {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		.swiper {
			width: 100%;
			img {
				width: 100%;
			}
		}
		.main {
			width: 100%;
			padding: 10px;
			display: flex;
			flex-wrap: wrap;
			div {
				width: 20%;
				text-align: center;
				img {
					width: 75%;
				}
				p {
					font-size: 13px;
					color: #000;
				}
			}
		}
		.main_swi {
			width: 100%;
			height: 50px;
			box-sizing: initial;
			padding: 0 0 5px 16px;
			border-bottom: 8px solid #F5F5F5;
			display: flex;
			align-items: center;
			img {
				width: 45px;
				margin-right: 15px;
			}
			.swiper1 {
				width: 100%;
				height: 100%;
				font-size: 14px;
				span {
					display: inline-block;
					background: orange;
					color: white;
					font-size: 12px;
					padding: 0px 5px;
					margin-right: 10px;
					border-radius: 6px;
				}
				.swiper-slide {
					display: flex;
					align-items: center;
				}
			}
		}
		.But {
			margin: 10px;
		}
		.animation {
			animation: route 1.5s linear 0s infinite;
		}
		@keyframes route {
			from {
				transform: rotate(0deg);
			}
			to {
				transform: rotate(360deg);
			}
		}
	}
</style>